<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>填写申请单</title>
<!-- 引入JQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/jquery-easyui-1.5.2/themes/icon.css" type="text/css"/>
</head>
<body>
	<h3>填写新品购物单</h3>
	<hr>
	<!-- 添加/删除按钮 -->
	<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add'" style="width:15%" onclick="addItem()">Add</a>
	<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" style="width:15%" onclick="removeItem()">Remove</a>
	<div style="margin:20px 0"></div>
	<table id="orderItem" cellspacing="0">
		<tr>
			<td>
				<select class="easyui-combobox" name="provider" style="width:120px;">
					<option value="AL">供货商1</option>
					<option value="AK">供货商2</option>
					<option value="AZ">供货商3</option>
				</select>
			</td>
			<td>
				<select class="easyui-combobox" name="carBrand" style="width:120px;">
					<option value="AL">车品牌1</option>
					<option value="AK">车品牌2</option>
					<option value="AZ">车品牌3</option>
				</select>
			</td>
			<td>
				<select class="easyui-combobox" name="carType" style="width:120px;">
					<option value="AL">车型1</option>
					<option value="AK">车型2</option>
					<option value="AZ">车型3</option>
				</select>
			</td>
			<td>
				<select class="easyui-combobox" name="engine" style="width:120px;">
					<option value="AL">发动机1</option>
					<option value="AK">发动机2</option>
					<option value="AZ">发动3</option>
				</select>
			</td>
			<td>
				<select class="easyui-combobox" name="driver" style="width:120px;">
					<option value="AL">驱动1</option>
					<option value="AK">驱动2</option>
					<option value="AZ">驱动3</option>
				</select>
			</td>
			<td>
				<select class="easyui-combobox" name="colors" style="width:120px;">
					<option value="AL">颜色1</option>
					<option value="AK">颜色2</option>
					<option value="AZ">颜色3</option>
				</select>
			</td>
			<td>
				<input id="tt" class="easyui-textbox" style="width:120px" data-options="
				prompt: '进购数量',
				iconWidth: 22,
				icons: [{
				iconCls:'icon-count'}
				]
				">
			</td>
		</tr>
	</table>
	<!-- 备注 -->
	<h4>备注</h4>
	<div style="margin:20px 0 10px 0;"></div>
	<input class="easyui-textbox" data-options="multiline:true" value="在此处给供货商留言" style="width:500px;height:100px">
	<!-- 确认订单提交 -->
	<div style="margin:20px 0 10px 0;"></div>
	<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-check'" style="width:20%" onclick="$('#dlg').dialog('open')">生成购物订单</a>
	<!-- 生成订单部分 -->
	<div id="dlg" class="easyui-dialog" title="购货单" style="width:850px;height:500px;padding:10px"
			data-options="
				iconCls: 'icon-save',
				toolbar: '#dlg-toolbar',
				buttons: '#dlg-buttons'
			">
			<h4 style="color:#0099FF";>购货单号:<span style="color: black;font-style: italic;">GHD00001</span></h4>
			<table class="easyui-datagrid">
				<thead>
					<tr>
						<th data-options="field:'itemid',width:100,align:'center'">序号</th>
						<th data-options="field:'providerName',width:100,align:'center'">供货商名称</th>
						<th data-options="field:'carBrand',width:100,align:'center'">车品牌</th>
						<th data-options="field:'carTypeName',width:100,align:'center'">车型名称</th>
						<th data-options="field:'engine',width:100,align:'center'">发动机</th>
						<th data-options="field:'driver',width:100,align:'center'">驱动</th>
						<th data-options="field:'color',width:100,align:'center'">颜色</th>
						<th data-options="field:'count',width:150,align:'center'">订购数量</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>郑州xx供货商</td>
						<td>宝马</td>
						<td>敞篷跑车</td>
						<td>SX99908</td>
						<td>vscd4x</td>
						<td>宝石蓝</td>
						<td>10</td>
					</tr>
				</tbody>
			</table>
			<h4 style="color:#0099FF";>备注</h4>
			<div style="margin:20px 0 10px 0;"></div>
			<input class="easyui-textbox" data-options="multiline:true" value="上次的那批货你们发的太慢了，这次发快一点" style="width:500px;height:100px">
	<div id="dlg-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:alert('save')">提交</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">重新填写</a>
	</div>
	</div>
</body>
<script>
//关闭首次弹对话框
$(function(){
	$('#dlg').dialog('close');
})
//创建JSON格式数据
var jsonArr = [{"name":"provider"},
	{"name":"carBrand"},
	{"name":"carType"},
	{"name":"engine"},
	{"name":"driver"},
	{"name":"colors"}
	];
/* 动态创建删除DOM元素 */
//获取table标签
var tableNode = $("#orderItem");
//添加item
function addItem(){
	//创建tr标签
	var trNode = document.createElement("tr");
	//创建td标签
	for(var i=0;i<6;i++){
		//创建td标签
		var tdNode = document.createElement("td");
		//创建select标签
		var selectNode = document.createElement("select");
		//设置属性
		$(selectNode).attr({"class":"easyui-combobox","name":""+jsonArr[i].name,"style":"width:120px"});
		//创建option标签
		for(var j=1;j<=3;j++){
			var optionNode = document.createElement("option");
			optionNode.value=j;
			optionNode.innerHTML=jsonArr[i].name+j;
			//添加option标签到select标签中
			selectNode.appendChild(optionNode);
		}
		//添加select标签到td标签
		tdNode.appendChild(selectNode);
		//添加td标签到tr标签
		trNode.appendChild(tdNode);
	}
	//创建最后的一个td标签
	var lastTdNode = document.createElement("td");
	//创建input标签
	var inputNode = document.createElement("input");
	//给input标签设置data-options属性
	$(inputNode).attr({"id":"tt","class":"easyui-textbox","style":"width:120px","data-options":"prompt: '进购数量',iconWidth: 22,icons: [{iconCls:'icon-count'}]"});	
	//添加input标签到td标签
	lastTdNode.appendChild(inputNode);
	//添加最后一个td标签到tr中
	trNode.appendChild(lastTdNode);
	//添加tr标签到table中
	tableNode[0].appendChild(trNode);
	//经过JQuery框架的渲染【重新加载页面】
	$.parser.parse();
	//关闭首次弹对话框
	$('#dlg').dialog('close');
}
//删除item
function removeItem(){
	//获取tableNode的多有子元素
	var tabChildren = tableNode[0].children;
	if(tabChildren.length>1){
		tableNode[0].removeChild(tableNode[0].lastChild);
	}
}
</script>
</html>